<template>
  <div class="map-mark">
    <div>
      <!-- 搜索 -->
      <div class="map-mark-search">
        <ElInput v-show="isSearchOpen" v-model="inputSearch" clearable class="custom-input" style="
            position: absolute;
            right: 28px;
            width: 300px;
            border-right: none;
          " @keydown.enter.prevent.native="searchClick" @keyup.enter.prevent.native="searchClick" @clear="handleClear"
          placeholder="搜位置，查标注">
          <template #prepend>
            <ElSelect v-model="selectList" placeholder="全局" style="width: 60px">
              <!-- <ElOption label="全局" value="1" /> -->
              <ElOption label="位置" :value="2" />
              <!-- <ElOption label="标注" value="3" /> -->
            </ElSelect>
          </template>
        </ElInput>
        <div class="map-mark-box" @click="searchClickOpen">
          <ElIcon class="font-size:14px">
            <Search />
          </ElIcon>
        </div>
        <!-- 搜索结果显示区域 -->
        <div class="search-results" v-show="searchResults && searchResults.length > 0">
          <div v-for="(item, index) in searchResults" :key="index" class="result-item" @click="centerToLocation(item)">
            <div class="result-name">
              <ElIcon class="location-icon">
                <Location />
              </ElIcon>
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <!-- 图形 -->
      <div class="map-mark-graphic">
        <!-- <div style="position: relative" class="map-mark-hover">
          <div class="map-mark-color">
            <div
              v-for="(color, index) in colors"
              :key="index"
              @click="colorClick('1', index)"
              class="color"
              :style="{
                backgroundColor: color,
                marginLeft: index === 0 ? '0' : '',
              }"
            >
              <ElIcon size="12" v-if="selectedIndex1 === index">
                <Check />
              </ElIcon>
            </div>
          </div>
          <div class="map-mark-box b-b b-r-t">
            <Icon name="punctuation" size="18" :color="svgColor1" />
          </div>
        </div>
        <div style="position: relative" class="map-mark-hover">
          <div class="map-mark-color">
            <div
              v-for="(color, index) in colors"
              :key="index"
              @click="colorClick('2', index)"
              class="color"
              :style="{
                backgroundColor: color,
                marginLeft: index === 0 ? '0' : '',
              }"
            >
              <ElIcon size="12" v-if="selectedIndex2 === index">
                <Check />
              </ElIcon>
            </div>
          </div>
          <div class="map-mark-box b-b">
            <Icon name="line" size="18" :color="svgColor2" />
          </div>
        </div>
        <div style="position: relative" class="map-mark-hover">
          <div class="map-mark-color">
            <div
              v-for="(color, index) in colors"
              :key="index"
              @click="colorClick('3', index)"
              class="color"
              :style="{
                backgroundColor: color,
                marginLeft: index === 0 ? '0' : '',
              }"
            >
              <ElIcon size="12" v-if="selectedIndex3 === index">
                <Check />
              </ElIcon>
            </div>
          </div>
          <div class="map-mark-box b-b">
            <Icon name="range" size="18" :color="svgColor3" />
          </div>
        </div>
        <div style="position: relative" class="map-mark-hover">
          <div class="map-mark-color">
            <div
              v-for="(color, index) in colors"
              :key="index"
              @click="colorClick('4', index)"
              class="color"
              :style="{
                backgroundColor: color,
                marginLeft: index === 0 ? '0' : '',
              }"
            >
              <ElIcon size="12" v-if="selectedIndex4 === index">
                <Check />
              </ElIcon>
            </div>
          </div>
          <div class="map-mark-box b-b b-r-b">
            <Icon name="circle" size="18" :color="svgColor4" />
          </div>
        </div> -->
        <!-- 鼠标绘制航线 -->
        <div class="map-mark-box b-b" style="margin-top: 10px" @click="mouseDrawClicks"
          :class="{ 'b-g': mouseDrawShow }">
          <ElTooltip effect="light" content="点击地图快速新增航点" placement="left">
            <svg t="1751332139197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5090" width="18" height="18" :fill="mouseDrawShow == true ? '#fff' : '#303133'">
              <path
                d="M221.8 723.5c-51.2 0-92.8-42.6-92.8-95.1 0.1-52.5 41.6-95 92.8-95.1H275c14.8 0 26.7 12.3 26.7 27.4 0 15.1-12 27.4-26.7 27.4h-53.2c-21.7 0-39.3 18.1-39.3 40.3 0 22.2 17.6 40.3 39.3 40.3h213.4c14.8 0 26.7 12.3 26.7 27.4 0 15.1-12 27.4-26.7 27.4H221.8z m579.9 135.3H300.5c-14.8 0-26.7-12.3-26.7-27.4 0-15.1 12-27.4 26.7-27.4h501.2c21.7 0 39.3-18.1 39.3-40.3 0-22.2-17.6-40.3-39.3-40.3H426.9c-14.8 0-26.7-12.3-26.7-27.4 0-15.1 12-27.4 26.7-27.4h374.8c51.2 0.1 92.8 42.6 92.8 95.1-0.1 52.6-41.6 95.1-92.8 95.1z m-281-668.3c0-14.6 11.6-26.5 25.9-26.5 14.3 0 25.8 11.9 25.8 26.5v159h155.2c14.3 0 25.9 11.9 25.9 26.5s-11.6 26.5-25.9 26.5H572.5v159c0 14.6-11.6 26.5-25.9 26.5-14.3 0-25.8-11.9-25.8-26.5v-159H365.5c-14.3 0-25.9-11.9-25.9-26.5s11.6-26.5 25.9-26.5h155.2v-159z"
                p-id="5091"></path>
            </svg>
          </ElTooltip>
        </div>
      </div>
    </div>
    <div>
      <!-- 指南针 -->
      <div class="map-mark-box compass" style="
          position: relative;
          margin-bottom: 10px;
          margin-left: 10px;
          font-weight: bold;
        " @click="viewsetRotationClick">
        <div :style="'transform: rotate(' + rotation + 'deg);'">
          <Icon name="compass" size="60" />
          <Icon name="direction" />
        </div>
        <span style="
            position: absolute;
            top: 40%;
            left: 50%;
            font-size: 16px;
            font-weight: bold;
            transform: translate(-50%, -40%);
          ">{{ get_direction_from_angle(get_rotation_to_num(rotation)) }}</span>
        <span style="
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -70%);
          ">{{ get_rotation_to_num(rotation) }}°</span>
      </div>
      <!-- <div class="compass">
      </div> -->
      <section style="margin-left: 15px">
        <!-- 自定义 -->
        <!-- <div style="position: relative" class="map-falyIcon customize">
          <div class="map-mark-box view-color" style="margin-bottom: 10px; margin-left: 10px; font-weight: bold">
            <Icon name="warning" size="20" />
          </div>
          <section class="map-falyIcon-box" style="top: -40vh">
            <div class="show-p" style="display: flex; align-items: center">
              <ElSwitch v-model="ruleForm.road4" />
              <span style="margin-left: 5px; font-size: 18px">显示自定义飞行区</span>
            </div>
            <ElDivider style="margin: 5px 0" />
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  margin-left: 5px;
                  background: #ffb2b2;
                  border-radius: 50%;
                ">
                <Icon name="custom" size="20" color="#fe1818" />
              </div>
              <span style="margin-left: 5px">自定义限飞区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="margin-left: 5px; background: #fff; border-radius: 50%">
                <Icon name="jobArea" size="20" color="#00ff00" />
              </div>
              <span style="margin-left: 5px">自定义作业区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  margin-left: 5px;
                  background: #ffd699;
                  border-radius: 50%;
                ">
                <Icon name="forbiddenArea" size="20" color="#ffab2e" />
              </div>
              <span style="margin-left: 5px">自定义禁降区</span>
            </div>
            <div class="show-p" style="display: flex; align-items: center; margin-top: 5px">
              <ElSwitch v-model="ruleForm.road5" />
              <span style="margin-left: 5px; font-size: 18px">显示解禁区域</span>
            </div>
            <ElDivider style="margin: 5px 0" />
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #f6ebfb;
                  border: 1px solid #bf39e4;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">解禁区</span>
            </div>
            <div class="show-p" style="display: flex; align-items: center; margin-top: 5px">
              <ElSwitch v-model="ruleForm.road6" />
              <span style="margin-left: 5px; font-size: 18px">显示限飞区域</span>
            </div>
            <ElDivider style="margin: 5px 0" />
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #f5c6be;
                  border: 1px solid #e56550;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">禁飞区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #e0e0e0;
                  border: 1px solid #b0b0b0;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">限高区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #b7dbfb;
                  border: 1px solid #379bf5;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">授权区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #fff0b2;
                  border: 1px solid #ffe371;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">警示区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #fadbb8;
                  border: 1px solid #f1952f;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">加强警示区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #c3edf4;
                  border: 1px solid #44c8de;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">法规限制区</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #e5f8e5;
                  border: 1px solid #56d456;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">轻型无人机适飞空域</span>
            </div>
            <div class="show-p" style="
                display: flex;
                align-items: center;
                margin-left: 10px;
                line-height: 35px;
              ">
              <div style="
                  width: 20px;
                  height: 20px;
                  margin-left: 5px;
                  background: #f6ebfb;
                  border: 1px solid #bf39e4;
                  border-radius: 50%;
                "></div>
              <span style="margin-left: 5px">查看临时限飞区</span>
            </div>
          </section>
        </div> -->
        <!-- 飞机危险 -->
        <!-- <div style="position: relative" class="map-falyIcon falyIcon">
          <div class="map-mark-box view-color map-falyIcon-hover"
            style="margin-bottom: 10px; margin-left: 10px; font-weight: bold">
            <Icon name="dangerousArea" size="20" color="#303133" />
          </div>
          <section class="map-falyIcon-box">
            <div class="show-p" style="display: flex; align-items: center">
              <ElCheckbox v-model="ruleForm.road1" />
              <div style="
                  padding: 2px;
                  margin-left: 5px;
                  background: #facccc;
                  border: 1px solid #e70102;
                  border-radius: 50%;
                ">
                <Icon name="highCollisionRisk" size="18" color="#e70102" />
              </div>
              <span style="margin-left: 5px">高碰撞风险的载人飞机</span>
            </div>
            <div class="show-p" style="display: flex; align-items: center">
              <ElCheckbox v-model="ruleForm.road2" />
              <div style="
                  padding: 2px;
                  margin-left: 5px;
                  background: #ffebcc;
                  border: 1px solid #f90;
                  border-radius: 50%;
                ">
                <Icon name="mediumCollisionRisk" size="18" color="#ff9900" />
              </div>
              <span style="margin-left: 5px">中碰撞风险的载人飞机</span>
            </div>
            <div class="show-p" style="display: flex; align-items: center">
              <ElCheckbox v-model="ruleForm.road3" />
              <div style="
                  padding: 2px;
                  margin-left: 5px;
                  background: #d2edfd;
                  border: 1px solid #1fa3f6;
                  border-radius: 50%;
                ">
                <Icon name="lowCollisionRisk" size="18" color="#1fa3f6" />
              </div>
              <span style="margin-left: 5px">低碰撞风险的载人飞机</span>
            </div>
          </section>
        </div> -->

        <!-- 回到地图中心点 -->
        <div class="map-mark-box view-color" style="margin-bottom: 10px; margin-left: 10px; font-weight: bold"
          @click="viewcenterClick">
          <Icon name="center" size="20" color="#303133" />
        </div>
        <!-- 2d 3D -->
        <div class="map-mark-box view-color" style="margin-bottom: 10px; margin-left: 10px; font-weight: bold"
          @click="viewClick">
          <span v-show="viewShow"> 2D</span>
          <span v-show="!viewShow"> 3D</span>
        </div>
        <!-- 地图尺寸 -->
        <div class="map-mark-graphic">
          <div class="map-mark-box b-b b-r-t" @click="mapsizeClick('add')">
            <ElIcon class="font-size:14px">
              <Plus />
            </ElIcon>
          </div>

          <div class="map-mark-box b-b b-r-b" @click="mapsizeClick('delete')">
            <ElIcon class="font-size:14px">
              <Minus />
            </ElIcon>
          </div>
        </div>
        <!-- 切换地图样式 -->
        <div class="map-style-box view-color" style="margin-top: 10px; margin-left: 10px; font-weight: bold"
          @click="mapstyleClick">
          <img v-if="mapType === 1" src="/static/map4.png" alt="" />
          <img v-if="mapType === 2" src="/static/map5.png" alt="" />
          <img v-if="mapType === 3" src="/static/map6.png" alt="" />
        </div>
      </section>
    </div>
    <mapstyleview v-if="mapstyleFlag" :mapType="mapType" @mapType="getmapType" ref="mapstyleRef"></mapstyleview>
  </div>
</template>
<script setup>
import { ref, watch, onMounted, onUnmounted, defineProps } from "vue";
import Icon from "./iocn.vue";
import {
  ElIcon,
  ElInput,
  ElSelect,
  ElOption,
  ElTooltip,
  ElCheckbox,
  ElSwitch,
  ElDivider,
  ElCard,
  ElScrollbar,
} from "element-plus";
import mapstyleview from "./mapstyleview.vue";
const props = defineProps({ rotation: Number, previousPitch: Number, drawing_mode: Number });
const emit = defineEmits([
  "viewClick",
  "mapsizeClick",
  "mouseDrawClick",
  "viewsetRotationClick",
  "viewcenterClick",
  "clearClick",
  "mapTypeClick",
  "getsearchClick",
  "selectItem",
]);
// 地图实例
const address = ref();
const point = ref();
const searchResults = ref([]);
const inputSearch = ref("");
const isSearchOpen = ref(false); // 控制是否显示搜索框
const viewShow = ref(true); // true 表示 2D，false 表示 3D
const mouseDrawShow = ref(false); // 鼠标绘制航线
const selectList = ref(2);
const ruleForm = ref({
  road1: true,
  road2: true,
  road3: true,
  road4: true,
  road5: true,
  road6: true,
});
const mapstyleFlag = ref(false);
const mapstyleRef = ref(null);
const mapType = ref(3); // 地图类型 1:标准地图 2:卫星地图-天地图 3:卫星地图-百度
const colors = [
  "rgb(45 140 240)",
  "rgb(25 190 107)",
  "rgb(255 187 0)",
  "rgb(226 60 57)",
  "rgb(182 32 224)",
];
const svgColor1 = ref("rgb(45 140 240)");
const svgColor2 = ref("rgb(45 140 240)");
const svgColor3 = ref("rgb(45 140 240)");
const svgColor4 = ref("rgb(45 140 240)");
const svgColor5 = ref("rgb(45 140 240)");
// 每个颜色选择器的独立选中状态
const selectedIndex1 = ref(0);
const selectedIndex2 = ref(0);
const selectedIndex3 = ref(0);
const selectedIndex4 = ref(0);
const colorClick = (type, index) => {
  if (type === "1") {
    svgColor1.value = colors[index];
    selectedIndex1.value = index;
  } else if (type === "2") {
    svgColor2.value = colors[index];
    selectedIndex2.value = index;
  } else if (type === "3") {
    svgColor3.value = colors[index];
    selectedIndex3.value = index;
  } else if (type === "4") {
    selectedIndex4.value = index;
    svgColor4.value = colors[index]; // 更新SVG颜色
  }
};

const updateSearchInfo = (addr) => {
  // 确保数据是数组格式
  if (Array.isArray(addr)) {
    searchResults.value = addr;
  } else {
    searchResults.value = [];
  }
};

const centerToLocation = (item) => {
  searchResults.value = [];
  inputSearch.value = item.name;
  emit("selectItem", item);
};

// 打开搜索框
const searchClickOpen = () => {
  if (!isSearchOpen.value) {
    isSearchOpen.value = true;
  } else if (inputSearch.value) {
    searchClick()
  }
};

// 执行搜索
const searchClick = () => {
  emit("getsearchClick", inputSearch.value);
};

// 处理 clearable 图标点击事件
const handleClear = () => {
  inputSearch.value = "";
  isSearchOpen.value = false; // 只有点击 clearable 图标时才隐藏搜索框
  // 同时清空搜索结果
  address.value = "";
  point.value = [];
  searchResults.value = [];
  emit("clearClick", inputSearch.value);
};

const get_rotation_to_num = (num) => {
  const number = Number(num);
  if (isNaN(number)) {
    return 0;
  }
  if (number > 360 || number < -360) {
    let nn = 0
    if (number > 360) nn = number - 360
    if (number < -360) nn = number + 360

    emit("viewsetRotationClick", nn)
  }
  // 直接使用取模运算，自动处理任意大小的角度值
  // 先取模得到 -360 到 360 范围内的值
  let angle = number % 360;
  // 如果结果为负数，加上 360 使其变为正数（可选，根据需求）
  // 如果希望保持负数形式，可以去掉下面这行
  // if (angle < 0) angle += 360;
  return Math.round(angle);
}
const get_direction_from_angle = (angle) => {
  // 确保角度在 0-360 范围内（处理负数）
  let normalizedAngle = angle;
  if (angle < 0) {
    normalizedAngle = 360 + (angle % 360);
  }

  // 四舍五入到整数
  normalizedAngle = Math.round(normalizedAngle) % 360;

  // 根据角度范围判断方向
  if ((normalizedAngle >= 0 && normalizedAngle < 22.5) || normalizedAngle >= 337.5) {
    return 'N'; // 北
  } else if (normalizedAngle >= 22.5 && normalizedAngle < 67.5) {
    return 'NE'; // 东北
  } else if (normalizedAngle >= 67.5 && normalizedAngle < 112.5) {
    return 'E'; // 东
  } else if (normalizedAngle >= 112.5 && normalizedAngle < 157.5) {
    return 'SE'; // 东南
  } else if (normalizedAngle >= 157.5 && normalizedAngle < 202.5) {
    return 'S'; // 南
  } else if (normalizedAngle >= 202.5 && normalizedAngle < 247.5) {
    return 'SW'; // 西南
  } else if (normalizedAngle >= 247.5 && normalizedAngle < 292.5) {
    return 'W'; // 西
  } else if (normalizedAngle >= 292.5 && normalizedAngle < 337.5) {
    return 'NW'; // 西北
  } else {
    return 'N'; // 默认返回北
  }
}
// 回到地图中心点
const viewcenterClick = () => {
  emit("viewcenterClick");
};
const viewsetRotationClick = () => {
  emit("viewsetRotationClick")
}
// 2d 3D
const viewClick = () => {
  // viewShow.value = !viewShow.value;
  emit("viewClick", props.previousPitch == 0);
};
// 地图尺寸
const mapsizeClick = (operation) => {
  emit("mapsizeClick", operation);
};

// 鼠标绘制航线
const mouseDrawClicks = () => {
  mouseDrawShow.value = !mouseDrawShow.value;
  emit("mouseDrawClick", mouseDrawShow.value);
};
const getClose = () => {
  mapstyleFlag.value = false;
};
// 切换地图样式
const mapstyleClick = () => {
  mapstyleFlag.value = !mapstyleFlag.value;
};

const getmapType = (type) => {
  mapType.value = type.type;
  emit("mapTypeClick", type);
};
// 关闭地图样式组件
const closeMapStyle = () => {
  mapstyleFlag.value = false;
};
watch(
  () => props.previousPitch,
  (newVal) => {
    if (newVal === 0) {
      viewShow.value = false;
    } else {
      viewShow.value = true;
    }
  },
  { deep: true }
);
// watch(
//   () => props.drawing_mode,
//   (newVal) => {
//     if (newVal != 2) {
//       mouseDrawShow.value = false;
//     }
//   }
// );
// 处理全局点击
const handleGlobalClick = (event) => {
  if (mapstyleFlag.value && mapstyleRef.value) {
    const target = event.target;
    const mapStyleEl = mapstyleRef.value.$el || mapstyleRef.value;
    // 检查点击是否在地图样式按钮上
    const mapStyleButton = document.querySelector(".map-style-box");
    if (mapStyleButton && mapStyleButton.contains(target)) {
      // 如果点击的是地图样式按钮，不关闭
      return;
    }
    // 检查点击是否在组件外部
    if (!mapStyleEl.contains(target)) {
      closeMapStyle();
    }
  }
};
// 监听全局点击
onMounted(() => {
  document.addEventListener("click", handleGlobalClick);
});

// 清理事件监听
onUnmounted(() => {
  document.removeEventListener("click", handleGlobalClick);
});
const setdrawingMode = (status) => {
  mouseDrawShow.value = status
}
// 暴露方法给父组件调用
defineExpose({
  setdrawingMode,
  updateSearchInfo,
});
</script>

<style scoped lang="scss">
.map-mark {
  position: absolute;
  top: 40px;
  right: 17.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: calc(100vh - 190px);
  color: #303133;
  text-align: center;

  .map-mark-box {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    color: #303133;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
  }

  .map-style-box {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 14px;
    color: #303133;
    // background: #fff;
    border: 3px solid #fff;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .view-color:hover {
    color: #1989fa;
  }

  .map-mark-search {
    cursor: pointer;
    position: relative;
    height: 28px;
    margin-bottom: 10px;
    margin-left: 10px;

    :deep(.el-select__wrapper) {
      height: 28px !important;
      min-height: 28px !important;
      padding: 0 5px !important;
      font-size: 12px !important;
      line-height: 28px !important;
      color: #303133 !important;
      border-radius: 4px 0 0 4px;
    }

    :deep(.el-input__wrapper) {
      height: 28px !important;
      min-height: 28px !important;
      font-size: 12px !important;
      line-height: 28px !important;
      color: #303133 !important;
      background: #fff;
      border-radius: 0;
    }

    :deep(.el-input-group__append) {
      width: 28px;
      padding: 0;
      border-radius: 0 4px 4px 0;
    }

    :deep(.el-input-group__prepend) {
      border-radius: 4px 0 0 4px;
    }
  }

  .map-mark-graphic {
    cursor: pointer;

    .b-b {
      margin-left: 10px;
      border: none;
      border-bottom: 1px solid #dcdfe6;
      border-radius: 0;
    }

    .map-mark-hover:hover .map-mark-color {
      display: flex;
    }

    .b-r-t {
      border-radius: 2px 2px 0 0;

      // .icon {
      //   fill: red;
      // }
    }

    .b-r-b {
      border-radius: 0 0 2px 2px;
    }

    .map-mark-color {
      position: absolute;
      right: 38px;
      display: none;
      height: 30px;
      padding: 6px;
      background: #fff;
      border: 1px solid #dcdfe6;
      border-radius: 2px;

      .color {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-left: 10px;
        font-size: 12px;
        font-weight: bold;
        border-radius: 2px;

        .el-icon {
          color: #fff;
        }
      }
    }
  }

  /* 确保地图容器可以接收鼠标事件 */
  #map-container {
    cursor: default;
    /* 默认鼠标样式 */
  }

  /* 飞机图标作为鼠标指针 */
  .cursor-fly {
    cursor: url("/static/flay.png"), auto;
  }

  // 鼠标绘制航线
  .b-g {
    background: #1989fa !important;
    border: none !important;
  }

  // 飞机危险图标样式
  .falyIcon {
    position: relative;
    cursor: pointer;

    &:hover .map-falyIcon-box {
      display: block !important;
    }
  }

  // 飞机危险图标样式
  .customize {
    position: relative;
    cursor: pointer;

    &:hover .map-falyIcon-box {
      display: block !important;
    }
  }

  .map-falyIcon-box {
    position: absolute;
    top: -5vh;
    right: 40px;
    z-index: 1000;
    display: none;
    width: 240px;
    padding: 10px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
  }

  .compass {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  // .compass {
  //   width: 50px;
  //   height: 50px;
  //   border-radius: 50%;
  //   margin-bottom: 14px;
  //   border: 5px solid #FFFFFF
  // }
}

.custom-input :deep(.el-input__clear) {
  color: #303133;
}

.search-results {
  position: absolute;
  top: 30px;
  right: 28px;
  z-index: 1000;
  width: 300px;
  font-size: 12px;
  color: #303133;
  background: #fff;
  border: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.result-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--el-border-color-light);
  transition: all 0.3s ease;
}

.result-item:hover {
  background-color: var(--el-color-primary-light-9);
  transform: translateX(4px);
}

.result-name {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.location-icon {
  margin-right: 8px;
  color: var(--el-color-primary);
}

:deep(.el-card__body) {
  padding: 0;
}
</style>
